<!--
 * @Author: 余铖
 * @Date: 2020-03-30 08:35:26
 * @LastEditors: 余铖
 * @LastEditTime: 2020-04-03 11:22:27
 * @Description: tab2
 -->
<template>
	<Drawer :closable="true" width="100" v-model="modal1" title="生成问卷" :styles="styles">
		<Card>
			<Button v-if="itemData.examType == 'YB'" style="margin: 0 0 0 5px" @click="downLoad(1)">下载一般问卷导入模板</Button>
			<Button v-if="itemData.examType == 'DW'" @click="downLoad(2)" style="margin: 0 0 0 15px">下载单位问卷导入模板</Button>
			<Button v-if="itemData.examType == 'GZ'" @click="downLoad(3)" style="margin: 0 0 0 15px">下载工作问卷导入模板</Button>
		</Card>
		<Card style="margin-top: 10px">
			<Tooltip content="温馨提示：导入文件请先下载模板，依照模板格式上传" placement="top-start" max-width="220">
				<Button @click="modal2 = true" type="info" icon="ios-cloud-upload-outline">上传并校验文件</Button>
				<!-- <Button type="info" style="margin: 0 0 0 5px" @click="exports">上传并校验文件</Button> -->
			</Tooltip>
			<Button :disabled="!isSure" @click="submits" type="warning" style="margin: 0 0 0 15px">生成问卷</Button>
			<!-- <Button :disabled="!isSure" @click="test2" type="primary" style="margin: 0 0 0 15px">预览问卷</Button> -->
		</Card>
		<Card style="margin-top:15px">
			<Table border :columns="columns" :data="tableData" ref="table" @on-select="onselect" @on-select-all="onselectall" @on-select-all-cancel="allCancel" @on-select-cancel="onselectcancel">
				<template slot-scope="{ row, index }" slot="number">
					<strong>{{ index+1 }}</strong>
				</template>
			</Table>
		</Card>

		<!-- 上传文件 -->
		<Modal v-model="modal2" title="上传文件" width="550">

			<Upload ref="upload" :data="itemData" :on-success="handleSuccess2" :format="['xls','xlsx']" :on-format-error="handleFormatError2" :action="importUrl">
				<Button type="info" icon="ios-cloud-upload-outline">选择文件</Button>
			</Upload>

			<div slot="footer">
				<!-- @on-ok="ok" -->
				<!-- :before-upload="handleUpload2" -->
				<!-- <Button size="large" long :loading="modal_loading" @click="del">Delete</Button> -->
				<!-- <Button size="large" @click="upload">upload</Button> -->
			</div>
		</Modal>
	</Drawer>
</template>

<script>
var _ = require("lodash");
import { requestData } from "@/api/personal.js";
import { URL } from "@/libs/util";
// 以防命名冲突
const HOST = URL;

export default {
	components: {},
	data() {
		return {
			tableData: [],
			// 父组件 数据
			itemData: {},
			// 选中的id数组
			selectId: [],
			importUrl: URL + "/exam/User/checkQust", // 导入url
			file: null,

			// 菜单权限 默认配置
			btnAccess: {
				add: true,
				del: true,
				upd: true,
				query: true
			},
			// 先确认 才能提交
			isSure: false,
			modal1: false,
			modal2: false,
			columns: [],
			columns2: [
				{
					type: "selection",
					width: 60,
					align: "center"
				},
				{
					title: "信息备注",
					key: "remarks"
				},
				{
					title: "编号",
					width: 100,
					// slot: "number",
					key: "sort"
				},
				{
					title: "题干",
					width: 150,
					key: "stem"
				},
				{
					title: "选项A",
					width: 120,
					key: "opA"
				},
				{
					title: "选项B",
					width: 120,
					key: "opB"
				},
				{
					title: "选项C",
					width: 120,
					key: "opC"
				},
				{
					title: "选项D",
					width: 120,
					key: "opD"
				},
				{
					title: "选项E",
					width: 120,
					key: "opE"
				},
				{
					title: "选项F",
					width: 120,
					key: "opF"
				}
			],
			columns1: [
				{
					type: "selection",
					width: 60,
					align: "center"
				},
				{
					title: "信息备注",
					key: "remarks"
				},
				{
					title: "编号",
					width: 100,
					// slot: "number",
					key: "sort"
				},
				{
					title: "题干",
					key: "stem"
				}
			],
			styles: {
				height: "calc(100% - 55px)",
				overflow: "auto",
				paddingBottom: "53px",
				position: "static"
			}
		};
	},
	mounted() {
		let btnAccess = sessionStorage.getItem("btnaccess");
		this.globalFunction(btnAccess);

		this.$nextTick(function() {
			document.getElementsByClassName(
				"ivu-table-overflowX"
			)[0].style.cssText = "overflow-x: hidden !important";
			document.getElementsByClassName(
				"ivu-modal-footer"
			)[0].style.cssText = "display: none";
		});
	},
	methods: {
        test2() {
            this.$router.push({path:'/wenjuan'})
        },
		// 导入excel
		// 上传文件
		handleSuccess2(res, file) {
			// console.log(res, file, '请求');
			if (res.code === "200") {
                this.modal2 = false;
                this.isSure = true;
				this.tableData = res.results.data;

                res.results.data.forEach((item,i) => {
                    if(item.statue == 1) {
                        this.$nextTick(()=>{
                            this.$refs.table.$refs.tbody.objData[i]._isChecked = true;
                            let data = this.$refs.table.$refs.tbody.objData[i];
                            this.selectId.push({
                                "questionnaireId": data.questionnaireId,
                                "sort": data.sort,
                                "departCode": data.departCode,
                                "remarks": data.remarks,
                                "stem": data.stem,
                                "statue": data.statue,
                                "examId": data.examId
                            });
                        })
                    }
                })

				this.$Notice.success({
					title: res.message
				});
			} else if (res.code === "500") {
				this.$Notice.error({
					title: res.message
				});
			}
		},

		downLoad(type) {
            let str = '';
            if(type == 1) {
                str = "/townScore/downTownScoreMoudle?fileName=YBMoudel.xlsx&chinaName=一般问卷导入模板.xlsx";
            } else if(type == 2) {
                str = "/townScore/downTownScoreMoudle?fileName=DWMoudel.xlsx&chinaName=单位问卷导入模板.xlsx";
            } else if(type == 3) {
                str = "/townScore/downTownScoreMoudle?fileName=GZMoudel.xlsx&chinaName=工作问卷导入模板.xlsx";
            }
			window.open(
				HOST + str
			);
		},

		initData() {
			if (this.itemData.examType == "YB") {
				this.columns = this.columns2;
			} else {
				this.columns = this.columns1;
			}
        },
        
        submits(){
			requestData({
				formData: { quesFilter: {
                    "examType": this.itemData.examType, //问卷类型
		            "examlists": this.selectId 
                }},
				url: "/exam/User/saveQust"
			})
            .then(result => {
                console.log(result, "resultresultresult");
                
                if (result.data.code === "200") {

                    this.$Modal.confirm({
                        title: '友情提示',
                        content: result.data.message+',是否立即预览问卷？',
                        onOk: () => {
                            this.$router.push({
                                path: '/wenjuan',
                                name: 'wenjuan',
                                params: {
                                    "examType": this.itemData.examType,
                                    "questionnaireId": this.itemData.questionnaireId,
                                    "examName": this.itemData.examName
                                }
                            })
                            // this.$router.push({path:'/wenjuan'})
                        },
                        onCancel: () => {
                            this.$emit('OK');
                            this.modal1 = false;
                        }
                    });
                } else {
                    this.$Message.error("失败");
                }
            })
            .catch(err => {
                console.log(err);
            });
        },
		onselect(selection, row) {
			this.isSure = true;
			this.selectId = [];
			selection.forEach(item => {
                // this.selectId.push(item.questionnaireId);
                this.selectId.push({
                    "questionnaireId": item.questionnaireId,
                    "sort": item.sort,
                    "departCode": item.departCode,
                    "remarks": item.remarks,
                    "stem": item.stem,
                    "statue": item.statue,
                    "examId": item.examId
                });
			});
		},
		onselectcancel(selection) {
			this.isSure = true;
			if (selection.length == 0) this.isSure = false;
			this.selectId = [];
			selection.forEach(item => {
                this.selectId.push({
                    "questionnaireId": item.questionnaireId,
                    "sort": item.sort,
                    "departCode": item.departCode,
                    "remarks": item.remarks,
                    "stem": item.stem,
                    "statue": item.statue,
                    "examId": item.examId
                });
			});
		},
		onselectall(selection) {
			this.isSure = true;
			this.selectId = [];
			selection.forEach(item => {
                this.selectId.push({
                    "questionnaireId": item.questionnaireId,
                    "sort": item.sort,
                    "departCode": item.departCode,
                    "remarks": item.remarks,
                    "stem": item.stem,
                    "statue": item.statue,
                    "examId": item.examId
                });
			});
		},
		allCancel(selection) {
			this.isSure = false;
			this.selectId = [];
		},
		// 阻止自动上传文件
		handleUpload2(file) {
			this.file = file;
			return false;
		},
		// 点击上传文件
		upload() {
			console.log(this.$refs.upload, "111111");
			console.log(
				{ file: this.file, questionnaireId: this.item.questionnaireId },
				"2222222"
			);
			this.$refs.upload.post({
				file: this.file,
				questionnaireId: this.item.questionnaireId
			}); // 请求
		},
		// 验证上传格式
		handleFormatError2(file) {
			this.$Notice.warning({
				title: "文件格式错误",
				desc: "文件" + file.name + " 格式错误, 请选择xls或者xlsx"
			});
		},
	}
};
</script>
<style>
.demo-drawer-profile {
	font-size: 14px;
}
.demo-drawer-profile .ivu-col {
	margin-bottom: 12px;
}
</style>